{{ pattern_preview('section_code', {
  bg: bg|default('black'),
  width: width|default('default'),
  padding_top: padding_top|default('default'),
  padding_bottom: 'large',
  content: intro,
  content_align: 'center',
  content_width: 'small',
  badge_headline: 'Choose your flavor:',
  data: [
    {
      title: 'Drupal opinionated',
      key: "drupal",
      intro: '',
      hide_code_toolbar: true,
      contents: [],
      codes: [{
      'title': 'Tailwind',
      'key': 'wingsuit_tailwind',
      'format': 'bash',
      'buttons': 'copy-to-clipboard',
      'code': 'npx @wingsuit-designsystem/cli init -k tailwind',
    },
      {
        'title': 'Bootstrap',
        'key': 'wingsuit_bootstrap',
        'format': 'bash',
        'buttons': 'copy-to-clipboard',
        'code': 'npx @wingsuit-designsystem/cli init -k bootstrap',
      }],
    },
    {
      title: 'Vanilla',
      key: "other",
      intro: "",
      contents: [],
      hide_code_toolbar: true,
      codes: [
      {
        'title': 'Tailwind',
        'key': 'vanilla_tailwind',
        'format': 'bash',
        'buttons': '',
        'code': '
npx @wingsuit-designsystem/cli init -k vanilla-tailwind

# Add "cms" app and configure the `distFolder`, `assetAtomicFolder` to
# your template folder in your `wingsuit.config.js`:
yarn ws generate-app

# Start your app:
yarn ws dev cms
',
      },
      {
        'title': 'SCSS',
        'key': 'vanilla_scss',
        'format': 'bash',
        'buttons': '',
        'code': '
npx @wingsuit-designsystem/cli init -k vanilla-scss

# Add "cms" app and configure the `distFolder`, `assetAtomicFolder` to
# your template folder in your `wingsuit.config.js`:
yarn ws generate-app

# Start your app:
yarn ws dev cms
',
      }
    ],
    },
  ]
}) }}

{% set kickstarter_left %}

  {{ pattern('rich_text', {'text': '
<h2><div class="text-2xl">You might also try ...</div>Drupal Kickstarter</h2>
<p>Wingsuit Kickstarter is the fastest way to start your Drupal project with Wingsuit. The Kickstarter uses UI Patterns to map Patterns to Drupal and Acquia Blt for automation.
</p>
',
  }, 'large' ) }}
{% endset %}
{% set kickstarter_right %}
  <div class="flex items-center justify-center pt-20">
  {{ pattern_preview('button', {'size': 'large', 'round': true, 'text': 'Get Started', 'url': '/drupal/ui_patterns/'}, 'default') }}
  </div>
{% endset %}
{{ pattern('section', {columns: 2, column_1: kickstarter_left, column_2: kickstarter_right, padding_bottom: 'default' }, '2_column') }}
